<template>
    <div id="player" class="videoPlayer" v-if="info.path">
    </div>
    <div v-else class="empty">
        <EmptyVideo></EmptyVideo>
    </div>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue'
import RightHooks from './index'
import EmptyVideo from '@renderer/components/icons/emptyVideo.vue'
let { startPlayer } = RightHooks()
const $props = defineProps({
    info: {
        type: Object,
        required: true
    }
})
const $emit = defineEmits(['nextVideo'])
watch(() => $props.info, (newVal) => {
    startPlayer(newVal, $emit)
})
onMounted(() => {
    if ($props.info.path) {
        startPlayer($props.info, $emit)
    }
})
</script>

<style scoped lang="scss">
.videoPlayer {
    width: 100%;
    height: 100vh;
    @include mixin.box_shadow();
    background-color: black;
}


:deep(.nplayer) {
    .nplayer_video-mirroring {
        transform: scaleX(-1);
    }
}

.empty {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    @include mixin.box_shadow();
    background-color: black;
}

:deep(.nplayer_control) {
    .nplayer_popover_panel {
        padding: 5px 15px;
    }
}
</style>